<template>
  <div class="comment-list">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载评论中...</p>
    </div>

    <div v-else-if="error" class="error-container">
      <i class="fa fa-exclamation-circle"></i>
      <p>{{ errorMessage }}</p>
      <button @click="loadComments" class="retry-btn">重试</button>
    </div>

    <div v-else-if="comments.length === 0" class="empty-container">
      <i class="fa fa-comment"></i>
      <p>暂无评论</p>
    </div>

    <div v-else class="comments-container">
      <div v-for="comment in comments" :key="comment.comment_id" class="comment-item">
        <div class="user-info">
          <!-- 头像渲染 -->
          <div class="avatar-container">
            <img
              v-if="comment.user_info?.avatar_url"
              :src="comment.user_info.avatar_url"
              :alt="comment.user_info.username || '用户头像'"
              class="avatar"
              @error="handleImageError"
            />
            <div v-else class="avatar placeholder">
              <i class="fa fa-user"></i>
            </div>
          </div>
          <div class="user-details">
            <span class="username">{{ comment.user_info?.username || '匿名用户' }}</span>
            <div class="rating-stars">
              <i
                v-for="star in 5"
                :key="star"
                class="fa"
                :class="star <= comment.rating ? 'fa-star' : 'fa-star-o'"
              ></i>
            </div>
          </div>
          <span class="comment-time">{{ formatCommentTime(comment.comment_time) }}</span>
        </div>

        <div class="comment-content">
          <p>{{ comment.content }}</p>
        </div>

        <div v-if="comment.images && comment.images.length > 0" class="comment-images">
          <div
            v-for="image in comment.images"
            :key="image.image_id"
            class="image-item"
            @click="previewImage(image.image_url)"
          >
            <img
              :src="image.image_url_full || image.image_url"
              alt="评论图片"
              @error="handleImageError"
            />
          </div>
        </div>

        <div v-if="comment.reply_content" class="comment-reply">
          <div class="reply-header">
            <span class="reply-label">商家回复：</span>
            <span class="reply-time">{{ formatCommentTime(comment.reply_time!) }}</span>
          </div>
          <p class="reply-content">{{ comment.reply_content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { commentsApi, type Comment, formatCommentTime } from '@/api/comments'

interface Props {
  goodsId: number
}

const props = defineProps<Props>()

const comments = ref<Comment[]>([])
const loading = ref(false)
const error = ref(false)
const errorMessage = ref('')

const loadComments = async () => {
  try {
    loading.value = true
    error.value = false
    const response = await commentsApi.getGoodsComments(props.goodsId)
    console.log('API响应数据:', response) // 调试信息
    comments.value = Array.isArray(response) ? response : []
  } catch (err) {
    console.error('加载评论失败:', err)
    error.value = true
    errorMessage.value = '加载评论失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 暴露方法给父组件
defineExpose({
  loadComments,
})

const previewImage = (imageUrl: string) => {
  // 这里可以实现图片预览功能
  window.open(imageUrl, '_blank')
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
  const placeholder = img.parentElement?.querySelector('.avatar.placeholder') as HTMLElement
  if (placeholder) {
    placeholder.style.display = 'flex'
  }
}

// 监听商品ID变化
watch(() => props.goodsId, loadComments)

// 生命周期
onMounted(() => {
  if (props.goodsId) {
    loadComments()
  }
})
</script>

<style scoped lang="scss">
.comment-list {
  .loading-container,
  .error-container,
  .empty-container {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    i {
      font-size: 48px;
      margin-bottom: 20px;
    }

    p {
      color: #666;
      margin-bottom: 20px;
      font-size: 16px;
    }
  }

  .loading-container i {
    color: #409eff;
  }

  .error-container i {
    color: #f56c6c;
  }

  .empty-container i {
    color: #909399;
  }

  .retry-btn {
    padding: 10px 20px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #66b1ff;
    }
  }

  .comments-container {
    .comment-item {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 12px;
          object-fit: cover;
        }

        .user-details {
          flex: 1;

          .username {
            font-weight: 600;
            color: #333;
            display: block;
            margin-bottom: 4px;
          }

          .rating-stars {
            color: #ffc107;
            font-size: 14px;
          }
        }

        .comment-time {
          color: #999;
          font-size: 14px;
        }
      }

      .comment-content {
        margin-bottom: 16px;

        p {
          color: #333;
          line-height: 1.6;
          margin: 0;
        }
      }

      .comment-images {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;

        .image-item {
          width: 80px;
          height: 80px;
          border-radius: 4px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.2s;

          &:hover {
            transform: scale(1.05);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .comment-reply {
        background: #f5f7fa;
        border-radius: 6px;
        padding: 12px;
        border-left: 3px solid #409eff;

        .reply-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .reply-label {
            font-weight: 600;
            color: #409eff;
          }

          .reply-time {
            color: #999;
            font-size: 12px;
          }
        }

        .reply-content {
          color: #666;
          margin: 0;
          line-height: 1.5;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .comment-list {
    .comments-container {
      .comment-item {
        padding: 16px;

        .user-info {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;

          .comment-time {
            align-self: flex-end;
          }
        }

        .comment-images {
          .image-item {
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
}
</style>
